<!--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<%@ page import="java.util.Map" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>个人中心</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="Mark Profile Widget Tab Form,Login Forms,Sign up Forms,Registration Forms,News letter Forms,Elements"/>
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
    <link href="index/css/style.css" rel="stylesheet" type="text/css" media="all" />
    <script type="text/javascript" src="index/js/jquery.min.js"></script>
</head>

<body>
<%
    Map<String,String> userName = (Map<String, String>) request.getSession().getAttribute("userName");
    Map<String,String> userBone = (Map<String, String>) request.getSession().getAttribute("userBone");
    if(userName == null) {
%>
<script type="text/javascript">
    alert(用户没有登陆);
</script>
<jsp:forward page="index.html"/>
<%
    }
%>
<div class="main">
    <h1>个人中心</h1>
    <div class="content">
        <div class="sap_tabs">
            <div id="horizontalTab" style="display: block; width: 100%; margin:0px;">
                <script src="index/js/easyResponsiveTabs.js" type="text/javascript"></script>
                <script type="text/javascript">
                    $(document).ready(function () {
                        $('#horizontalTab').easyResponsiveTabs({
                            type: 'default', //Types: default, vertical, accordion
                            width: 'auto', //auto or any width like 600px
                            fit: true,   // 100% fit in a container
                            closed: 'accordion', // Start closed if in accordion view
                            activate: function(event) { // Callback function if tab is switched
                                var $tab = $(this);
                                var $info = $('#tabInfo');
                                var $name = $('span', $info);
                                $name.text($tab.text());
                                $info.show();
                            }
                        });

                        $('#verticalTab').easyResponsiveTabs({
                            type: 'vertical',
                            width: 'auto',
                            fit: true
                        });
                    });
                </script>
                <div >
                    <div class="port-left">
                        <form enctype="multipart/form-data" method ="post" action="upload3">
                            上传头像<input type="file" name="file"/><br/>
                            <input type="submit" name="upload" value="上传" />
                        </form>
                        <a href="https://cas.dgut.edu.cn?appid=javaee&state=STATE"><button class="button-show">绑定用户</button></a>
                        <ul class="resp-tabs-list">
                            <% String address="/image/"+userName.get("头像");%>
                            <img src="<%=address%>" alt="" />
                            <li class="resp-tab-item" aria-controls="tab_item-0" role="tab"><span>详情</span></li>
                            <li class="resp-tab-item" aria-controls="tab_item-1" role="tab"><span>绑定信息</span></li>
                            <li class="resp-tab-item" aria-controls="tab_item-2" role="tab"><span>爱好</span></li>
                        </ul>
                    </div>

                    <div class="port-right">

                        <div class="resp-tabs-container">

                            <!-- Tab 0 -->					<div class="tab-1 resp-tab-content" aria-labelledby="tab_item-0">
                            <div class="profile-content">
                                <h3><% out.print(userName.get("用户名"));%></h3>
                                <h4>邮箱</h4>
                                <div class="email-group">
                                    <div class="email-icon"><span><img src="index/images/email1.png" alt=""></span></div>
                                    <div class="email-form">
                                        <form>
                                            <p class="fb-ico"><% out.print(userName.get("电子邮箱"));%></p>
                                        </form>
                                    </div>
                                    <div class="clear"></div>
                                </div>
                                <h4>手机号码</h4>
                                <div class="phone-group">
                                    <div class="cell-icon"><span><img src="index/images/phone1.png" alt=""></span></div>
                                    <div class="cell-form">
                                        <form>
                                            <p class="fb-ico"><%  out.print(userName.get("手机号码"));%></p>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            <div class="clear"></div>
                        </div>


                            <!-- Tab 1 -->						<div class="tab-1 resp-tab-content" aria-labelledby="tab_item-1">
                            <div class="social">
                                <h3><% out.print(userName.get("用户名"));%></h3>
                                        学号<%out.print(userBone.get("学号"));%>
                                        <br>
                                        姓名<%out.print(userBone.get("姓名"));%>
                                        <br>
                                        学院<%out.print(userBone.get("学院"));%>
                            </div>
                        </div>

                            <!-- Tab 2 -->					<div class="tab-1 resp-tab-content" aria-labelledby="tab_item-2">
                            <div class="hobby">
                                <h3><% out.print(userName.get("用户名"));%></h3>
                                <div class="hobby-info">

                                    <h5>游戏</h5>
                                    <p>
                                    </p>
                                    <h5>音乐</h5>
                                    <p>
                                    </p>

                                </div>
                            </div>
                        </div>


                        </div>

                    </div>
                    <div class="clear"></div>
                </div>

            </div>
        </div>
</body>
</html>